<template>
	<view id="list">
		<view class="filter">
			<view class="filter-item" :class="queryParam.areaName == '' ? 'filter-item' : 'filter-item filter-item-blue'" @click="toSelector">
				{{ queryParam.areaName == '' ? '所属区域' : queryParam.areaName }}
				<u-icon name="arrow-up" size="12"></u-icon>
			</view>
			<view class="filter-item" @click="showDateList">
				{{ filterTime }}
				<u-icon v-if="showIconDate" name="arrow-up" size="14"></u-icon>
				<u-icon v-else name="arrow-down" size="14"></u-icon>
			</view>
			<view class="filter-item" @click="showResultsList">
				筛选
				<u-icon v-if="showIconResults" name="arrow-up" size="14"></u-icon>
				<u-icon v-else name="arrow-down" size="14"></u-icon>
			</view>
		</view>
		<!-- 时间选择 -->
		<u-picker
			:show="showDate"
			:columns="columnsDate"
			closeOnClickOverlay
			@confirm="onProConfirm"
			@cancel="onProCancel"
			@close="onClosePro"
			keyName="title"
		>
		</u-picker>
		<!-- 区域选择 -->
		<u-picker
			closeOnClickOverlay
			:show="showArea"
			:loading="cityLoading"
			ref="cityPicker"
			:columns="cityColumns"
			@change="onChangeCity"
			@cancel="onCityCancel"
			@close="onCloseCity"
			keyName="areaName"
			@confirm="onCityConfirm"
		>
		</u-picker>
		<view class="warn-item-box">
			<view class="warn-total">
				<image class="alert-title-img" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/gjxx.png"></image>
				<view>告警总数：<text>{{ warnTotal }}</text></view>
			</view>
			<view class="warn-item" v-for="(item,index) in warnList" :key="index" @click="onDetail(item.id)">
				<view slot="title" class="u-slot-title">
					<text>项目名称：</text>{{item.projectName}}
				</view>
				<view class="detail" v-if="item.readFlag == 1">已读</view>
				<view class="detail wd" v-else>未读</view>
				<view class="warn-item-content">
					<view class="warn-tit">告警情况说明：</view>
					<view class="content-item">
						<image class="alert-title-img" src="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/gjxx.png" mode=""></image>
						<text class="alert-title">{{item.alertTitle}}</text>
					</view>
					<view class="alert-type">
						<view>
							<!-- <block v-for="alert in alertType" :key="item.id" v-if="alert.id == item.alertType"> -->
								<view v-if="item.alertType == 0" class="alert-type-in">
									<u-icon name="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/wash_icon.png"></u-icon>
									<text class="alert-title">车辆冲洗</text>
								</view>
								<view v-if="item.alertType == 1 || item.alertType == 2" class="alert-type-in">
									<u-icon name="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/zszd.png"></u-icon>
									<text class="alert-title">扬尘设备</text>
								</view>
								<view v-if="item.alertType == 3" class="alert-type-in">
									<u-icon name="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/warn_zs.png"></u-icon>
									<text class="alert-title">噪声</text>
								</view>
								<view v-if="item.alertType == 5" class="alert-type-in">
									<u-icon name="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/soil_icon.png"></u-icon>
									<text class="alert-title">裸土覆盖</text>
								</view>
								<view v-if="item.alertType == 6" class="alert-type-in">
									<u-icon name="https://bc-staticfiles.oss-cn-zhangjiakou.aliyuncs.com/wechat/zxjc.png"></u-icon>
									<text class="alert-title">TSP</text>
								</view>
							<!-- </block> -->
						</view>
						<view class="alert-flag">
							<text class="processing-results" v-if="item.flag == 1">已处理</text>
							<text class="processing-results-not" v-else>未处理</text>
						</view>
					</view>
				</view>
				<!-- <view class="content-time">告警时间：{{item.createTime}}</view> -->
				<!-- <u-gap height="3" bgColor="#eee"></u-gap> -->
			</view>
		</view>
		<!-- 筛选条件 -->
		<u-popup :show="searchShow" mode="bottom" :round="10" @close="searchClose">
			<view class="search-wrap">
				<view class="search-item">
					<u-divider text="已读未读" textPosition="left"></u-divider>
					<view class="search-item-tags">
						<view class="search-item-tag">
							<uni-tag text="全部" :inverted="queryParam.readFlag != ''" type="primary" @click="isRead('')"></uni-tag>
						</view>
						<view class="search-item-tag">
							<uni-tag text="已读" :inverted="queryParam.readFlag != '1'" type="primary" @click="isRead('1')"></uni-tag>
						</view>
						<view class="search-item-tag">
							<uni-tag text="未读" :inverted="queryParam.readFlag != '0'" type="primary" @click="isRead('0')"></uni-tag>
						</view>
					</view>
				</view>
				<view class="search-item">
					<u-divider text="处理状态" textPosition="left"></u-divider>
					<view class="search-item-tags">
						<view class="search-item-tag">
							<!-- inverted为false是选中状态 -->
							<uni-tag text="全部" :inverted="queryParam.flag != ''" type="primary" @click="isAss('')"></uni-tag>
						</view>
						<view class="search-item-tag">
							<uni-tag text="已处理" :inverted="queryParam.flag != '1'" type="primary" @click="isAss('1')"></uni-tag>
						</view>
						<view class="search-item-tag">
							<uni-tag text="未处理" :inverted="queryParam.flag != '0'" type="primary" @click="isAss('0')"></uni-tag>
						</view>
					</view>
				</view>
				<view class="search-item">
					<u-divider text="常规预警" textPosition="left"></u-divider>
					<view class="search-item-tags">
						<view class="search-item-tag">
							<uni-tag text="全部" :inverted="queryParam.alertType != ''" type="primary" @click="isType('')"></uni-tag>
						</view>
						<view class="search-item-tag">
							<uni-tag text="扬尘设备" :inverted="queryParam.alertType != '1'" type="primary" @click="isType('1')"></uni-tag>
						</view>
<!-- 						<view class="search-item-tag">
							<uni-tag text="PM2.5" :inverted="queryParam.alertType != '2'" type="primary" @click="isType('2')"></uni-tag>
						</view> -->
						<view class="search-item-tag">
							<uni-tag text="噪声设备" :inverted="queryParam.alertType != '3'" type="primary" @click="isType('3')"></uni-tag>
						</view>
						<view class="search-item-tag">
							<uni-tag text="车辆冲洗" :inverted="queryParam.alertType != '0'" type="primary" @click="isType('0')"></uni-tag>
						</view>
						<view class="search-item-tag">
							<uni-tag text="裸土覆盖" :inverted="queryParam.alertType != '5'" type="primary" @click="isType('5')"></uni-tag>
						</view>
						<view class="search-item-tag">
							<uni-tag text="视频离线" :inverted="queryParam.alertType != '999'" type="primary" @click="isType('999')"></uni-tag>
						</view>
					</view>
				</view>
			</view>
			<u-divider textPosition="left"></u-divider>
			<view class="search-btn">
				<view class="search-btn-item" @click="onSearch">查询</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getWarnList3 } from '@/api/warn'
	import config from '@/utils/defaultConfig'
	import { getAreaList, getChildren } from '@/api/global'
	import { postRead } from '@/api'
	import { AREA_ID } from '@/store/mutaction-types'
	
	export default {
		data () {
			return {
				areaId: uni.getStorageSync(AREA_ID),
				queryParam: {
					areaIds: '',
					receiveStatus: '',
					flag: '',
					pageNum: 1,
					alertType: '',
					areaName: '',
					readFlag: '',
					cycleEnum: ''
					// reasonable: false
				},
				warnList: [],
				alertType: config.alertType,
				filterTime: '全部',
				showIconDate: true,
				showIconResults: true,
				showDate: false,
				columnsDate: [
					['全部', '天', '周', '月']
				],
				searchShow: false,
				// 区域数据
				showArea: false,
				cityLoading: false,
				cityColumns: [
					[],
					[]
				],
				areaList: [],
				warnTotal: ''
			}
		},
		onLoad(option) {
			for (const k in option) {
				this.queryParam[k] = option[k]
				this.areaId = this.queryParam.areaId
			}
		},
		onShow() {
			this.warnList = []
			this.queryParam.pageNum = 1
			this.getAreaList()
			this.getList()
		},
		onReachBottom() {
			this.queryParam.pageNum++
			this.getList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.warnList = []
			this.queryParam.pageNum = 1
			this.getAreaList()
			this.getList()
			uni.stopPullDownRefresh()
		},
		methods: {
			// 区域选择
			toSelector () {
				const current = getCurrentPages()
				const url = current[current.length - 1].route
				this.queryParam.url = url
				let params = ''
				for (const k in this.queryParam) {
					params += `${k}=${this.queryParam[k]}&`
				}
				uni.navigateTo({
					url: '/packageB/selector/select-area?' + params
				})
			},
			// 告警列表
			getList () {
				uni.showLoading({
					title: '数据加载中',
					mask: true
				})
				getChildren(this.areaId).then(areas => {
					const ids = areas.data.data
					const areaIds = []
					for (const k in ids) {
						areaIds.push(ids[k].id)
					}
					this.queryParam.areaIds = areaIds.join(',')
					getWarnList3(this.queryParam).then(res => {
						const data = res.data.rows
						this.warnTotal = res.data.total
						if (this.warnList.length < this.warnTotal) {
							this.warnList = this.warnList.concat(res.data.rows)
						} else {
							uni.$u.toast('没有更多数据')
						}
					}).catch(error => {
						uni.$u.toast(error)
					}).finally(() => {
						uni.hideLoading()
					})
				})
			},
			// 区域
			getAreaList () {
				getAreaList().then(res => {
					this.areaList = res.data.data
					this.cityColumns[0] = this.areaList
					if (this.areaList[0].children.length == 0) {
						this.cityColumns[1] = this.areaList[0]
					} else {
						this.cityColumns[1] = this.areaList[0].children
					}
				})
			},
			// 区域选择事件--
			onCityConfirm(e) {
				if (e.value[0].children.length == 0) {
					this.queryParam.areaName = e.value[0].areaName
					this.areaId = e.value[0].id
				} else {
					this.queryParam.areaName = e.value[1].areaName
					this.areaId = e.value[1].id
				}
				this.showArea = false
				this.warnList = []
				this.queryParam.pageNum = 1
				this.getList()
			},
			onChangeCity(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.cityPicker
				} = e
				if (columnIndex === 0) {
					this.cityLoading = true
					uni.$u.sleep(100).then(res => {
						picker.setColumnValues(1, this.areaList[e.index].children)
						// this.reportLevOpts[0] = this.areaList[e.index].children
						this.cityLoading = false
					})
				}
			},
			onCloseCity (e) {
				this.showArea = false
			},
			onCityCancel () {
				this.showArea = false
			},
			onCloseCity (e) {
				this.showArea = false
			},
			// 筛选条件查询
			showResultsList () {
				this.showIconResults = false
				this.searchShow = true
			},
			onSearch() {
				this.warnList = []
				this.queryParam.pageNum = 1
				this.searchShow = false
				this.getList()
			},
			isType(value) {
				this.queryParam.alertType = value
			},
			isAss(value) {
				this.queryParam.flag = value
			},
			isRead (value) {
				this.queryParam.readFlag = value
			},
			// 关闭筛选条件
			searchClose() {
				this.searchShow = false
			},
			// 选择时间
			showDateList () {
				this.showIconDate = false
				this.showDate = true
			},
			onProCancel() {
				this.showIconDate = true
				this.showDate = false
			},
			onClosePro() {
				this.showIconDate = true
				this.showDate = false
			},
			onProConfirm(e) {
				this.filterTime = e.value[0]
				const index = e.indexs[0]
				this.showIconDate = true
				this.showDate = false
				if (index === 0) {
					this.queryParam.cycleEnum = ''
				} else if (index === 1) {
					this.queryParam.cycleEnum = 'TODAY'
					
				} else if (index === 2) {
					this.queryParam.cycleEnum = 'WEEK'
				} else {
					this.queryParam.cycleEnum = 'MONTH'
				}
				this.warnList = []
				this.getList()
			},
			// 点击列表调转对应详情
			onDetail (id) {
				postRead(id).then(res => {
					uni.navigateTo({
						url: '/packageE/warn/infodetail?id=' + id
					})
				}).catch(err => {
					uni.navigateTo({
						url: '/packageE/warn/infodetail?id=' + id
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	#list {
		font-size: 28upx;
		height: 100vh;
			position: relative;
		.filter {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			z-index: 9;
			.filter-item {
				font-size: 32upx;
				flex-grow: 1;
				padding: 20upx 0;
				display: flex;
				justify-content: center;
				text-align: center;
				font-weight: bold;
			}
		}
		.warn-item-box {
			background-color: #eee;
			padding: 20upx;
			margin-top: 80upx;
			.warn-total {
				display: flex;
				background-color: #fff;
				padding: 20upx;
				margin-bottom: 20upx;
				box-shadow: 0 1px 3px #ccc;
				border-radius: 10upx;
				height: 32upx;
				line-height: 32upx;
				text {
					font-weight: bold;
					color: $uni-color-primary;
				}
				image {
					width: 32upx;
					height: 32upx;
					margin-right: 10upx;
				}
			}
		}
		.warn-item {
			position: relative;
			background-color: #fff;
			padding: 40upx 20upx;
			margin-bottom: 20upx;
			box-shadow: 0 1px 3px #ccc;
			border-radius: 10upx;
			.u-slot-title {
				position: relative;
				padding-left: 20upx;
				border-radius: 5upx;
				font-size: 30upx;
				width: 85%;
				// font-weight: bold;
				text {		
					color: #999;
				}
				&::before {
					position: absolute;
					left: 0;
					top: 7upx;
					content: '';
					width: 10upx;
					height: 32upx;
					background-color: $uni-color-primary;
					border-radius: 4upx;
				}
			}
			.wd {
				color: $uni-color-warning !important;
			}
			.u-slot-value {
			}
			.content-item1 {
				padding: 10upx 0;
			}
			.warn-item-content {
				// position: relative;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 10upx 20upx;
				.warn-tit {
					color: #999;
					margin-top: 20upx;
					font-size: 30upx;
				}
				.content-item {
					position: relative;
					display: flex;
					padding: 16upx 0 16upx 26upx;
					.alert-title-img {
						position: absolute;
						left: 0;
						top: 20upx;
						width: 32upx;
						height: 32upx;
					}
					.alert-title {
						line-height: 40upx;
						padding-left: 20upx;
					}
				}
				.alert-type {
					position: relative;
					margin-top: 10upx;
					padding-left: 26upx;
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.alert-type-in {
						position: absolute;
						left: 0upx;
						top: 4upx;
						display: flex;
					}
					.u-slot-value {
					}
					.alert-title {
						padding-left: 14upx;
						color: $uni-color-primary;
						font-weight: bold;
					}
					.alert-flag {
						.processing-results, .processing-results-not {
							display: block;
							padding: 0 16upx;
							height: 40upx;
							line-height: 40upx;
						}
						.processing-results {
							background-color: rgba(65,136,240,.2);
							color: $uni-color-primary;
						}
						.processing-results-not {
							background-color: rgba(255, 101, 74, 0.2);
							color: #ff654a;
						}
					}
				}
			}
			.content-time {
				text-align: right;
				// font-size: 24upx;
				padding: 10upx 20upx;
				color: $uni-text-color-grey;
			}
			.detail {
				position: absolute;
				right: 28upx;
				top: 40upx;
				color: #999;
			}
		}
		.search-wrap {
			padding: 20upx;

			.search-item-tags {
				display: flex;
				flex-wrap: wrap;

				.search-item-tag {
					margin-right: 10upx;
					margin-bottom: 26upx;
				}
			}
		}

		.search-btn {
			padding: 0 20upx 25upx;
			display: flex;
			justify-content: center;
			align-items: center;

			.search-btn-item {
				width: 45%;
				border-radius: 20upx;
				text-align: center;
				// font-size: 32upx;
				color: #fff;
				line-height: 60upx;
				background-image: linear-gradient(to right, #2595f9, #1eb8ee);
				box-shadow: 0 1px 4px 0px rgba(30,184,238,0.3);
			}
		}

	}
</style>
